<template>
 <div
     class="selector-item"
     :class="{
       'words-selected': isSelected
     }">
    <span
        v-for="char in words"
        class="char-normal"
        :class="{
          'char-highlight': highlightWords.includes(char)
        }">{{char}}</span>
 </div>
</template>

<script lang="ts" setup>
import {ITreeItem} from "@/components/scSelector/types";

const props = defineProps<{
  data: ITreeItem,
  words: string,
  highlightWords: string,
  isSelected: boolean,
}>()
</script>

<style scoped lang="scss">
.selector-item{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.words-selected {
  color: var(--el-color-primary);
}

.char-normal {

}

.char-highlight {
  color: var(--el-color-success);
  font-weight: bold;
}
</style>
